<template>
  <div class="showDataContainer">
    <div class="showDataBox" v-for="(item, index) in baseInfo" :key="index">
      <div class="part">
        <div class="imgContent">
          <img :src="requireImg(item.totalIcon)" alt="" />
        </div>
        <div class="valueContent">
          <div class="valueTitle">{{ item.totalTitle }}</div>
          <div class="value" :style="{color: item.color}">{{data[index]?.total}}</div>
        </div>
      </div>
      <div class="part">
        <div class="imgContent">
          <img :src="requireImg(item.monthIcon)" alt="" />
        </div>
        <div class="valueContent">
          <div class="valueTitle">{{ item.monthTitle }}</div>
          <div class="value" :style="{color: item.color}">{{data[index]?.month}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { requireImg } from "@/utils";
const baseInfo = [
  {
    totalTitle: "总采集数据量",
    monthTitle: "当月采集量",
    totalIcon: "hospital/info_1.png",
    monthIcon: "hospital/info_2.png",
    color: '#ffff43'
  },
  {
    totalTitle: "总门诊数量",
    monthTitle: "当月门诊数量",
    totalIcon: "hospital/info_3.png",
    monthIcon: "hospital/info_4.png",
    color: '#25EBCA'
  },
  {
    totalTitle: "总住院人数",
    monthTitle: "当月住院人数",
    totalIcon: "hospital/info_5.png",
    monthIcon: "hospital/info_6.png",
    color: '#FF4E4E'
  },
];
const {data} = defineProps(['data'])
</script>

<style lang="less" scoped>
.showDataContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .showDataBox {
    width: 31.66vw;
    height: 11.48vh;
    background: #034c6a;
    display: flex;
    align-items: center;
    padding-left: 1.3vw;
    .part {
      flex: 1;
      display: flex;
      .imgContent {
        width: 2.08vw;
        margin-right: 1.3vw;
        img {
          width: 100%;
        }
      }
      .valueContent{
        .valueTitle{
            font-size: 0.75vw;
            color: #fff;

        }
        .value{
            font-size: 1vw;
            font-weight: 800;
            margin-top: 1.38vh;
        }
      }
    }
  }
}
</style>
